<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view locale="#{salaoMB.internacionalizacao.currentLocale}">
	<h:head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=ISO-8859-1" />
		<title>Agendamento</title>
		<link rel="stylesheet" href="../css/salao.css" type="text/css"	media="screen" /> 
		<style type="text/css">
		.negrito {
			font-weight: bold;
		}
		
		.vermelho {
			color: #FF0000;
		}
		
		.servicos{
			font-size: 9pt;
			width: 30;
		}
		.fontSmall{
			font-size: 9pt;
		}
		</style>
		<script type="text/javascript">
          PrimeFaces.locales['pt'] =
          {
               closeText: 'Fechar',
               prevText: 'Anterior',
               nextText: 'Próximo',
               currentText: 'Start',
               monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
               monthNamesShort: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
               dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
               dayNamesShort: ['Dom','Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
               dayNamesMin: ['DOM', 'SEG', 'TER', 'QUAR', 'QUI', 'SEX', 'SAB'],
               weekHeader: 'Semana',
               firstDay: 1,
               isRTL: false,
               showMonthAfterYear: false,
               yearSuffix: '',
               timeOnlyTitle: 'Horário',
               timeText: 'Horário',
               hourText: 'Hora',
               minuteText: 'Minuto',
               secondText: 'Segundo',
               currentText: 'Hoje',
               ampm: false,
               month: 'MÊS',
               week: 'SEMANA',
               day: 'DIA',
               allDayText: 'Dia Todo'
           };          
    </script>
    </h:head>
	
	<h:body styleClass="bg-content">

		<f:metadata>
			<f:viewParam name="idSelectedEstabelecimento"
				value="#{agendamentoMB.idSelectedEstabelecimento}"></f:viewParam>
			<f:viewParam name="nomeFantasia"
				value="#{agendamentoMB.estabelecimento.nomeFantasia}"></f:viewParam>
			<f:viewParam name="ddd" value="#{agendamentoMB.estabelecimento.ddd}"></f:viewParam>
			<f:viewParam name="telefoneContato"
				value="#{agendamentoMB.estabelecimento.telefone}"></f:viewParam>
			<f:viewParam name="bairroEstabelecimento"
				value="#{agendamentoMB.estabelecimento.endereco.bairro.descricao}"></f:viewParam>
			<f:viewParam name="cidadeEstabelecimento"
				value="#{agendamentoMB.estabelecimento.endereco.bairro.cidade.nome}"></f:viewParam>
			<f:viewParam name="logradouro"
				value="#{agendamentoMB.estabelecimento.endereco.logradouro}"></f:viewParam>
			<f:viewParam name="numero"
				value="#{agendamentoMB.estabelecimento.endereco.numero}"></f:viewParam>

			<f:event listener="#{agendamentoMB.carregarAgenda}"
				type="preRenderView" />
			<f:event listener="#{agendamentoMB.carregarEventos}"
				type="preRenderView" />
			<f:event
				listener="#{agendamentoMB.gerarHorariosDisponiveisPorDiaEServico}"
				type="preRenderView" />
		</f:metadata>


		<table width="100%">
			<tr>
				<td><ui:include src="/index.xhtml" />
				</td>
			</tr>
		</table>

<table width="60%" align="center">
	<tr>
		<td>		
		<p:panel header="Agendamento Online">
		
		<p:ajaxStatus onstart="PF('statusDialog').show();" onsuccess="PF('statusDialog').hide();"/>  
              
		<p:dialog modal="true" widgetVar="statusDialog" header="Carregando"   
        	draggable="false" closable="false">  
    	<p:graphicImage value="/img/ajax-loading-bar-19.gif" />  
		</p:dialog> 
		
		<h:form>
			<table width="90%" align="center">
					<tr>
						<td>
						 	<p:commandButton value="Ver horários de funcionamento" oncomplete="dlg.show()" />
						 </td>  
					</tr>
			</table>	
			<p:dialog header="Funcionamento do Salão" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg" resizable="false">
			<table width="400">
					<tr>
						<td>								
						<h:outputText value="Empresa: " />
						<h:outputText
									value="#{agendamentoMB.estabelecimento.nomeFantasia}" />
						</td>
					</tr>
					<tr>
						<td><h:outputText value="Horário de Funcionamento:"/></td>
					</tr>
					<tr>
						<td><p:dataTable var="diaSemana"
								value="#{agendamentoMB.listDiasSemana}" id="tableDiaSemana"
								emptyMessage="Agenda não disponibilizada.">

								<p:column headerText="Segunda">
									<h:outputText
										value="#{diaSemana.horaIniSegunda}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimSegunda}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>										
								</p:column>

								<p:column headerText="&nbsp;Terça&nbsp;">
									<h:outputText
										value="#{diaSemana.horaIniTerca}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimTerca}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>									
								</p:column>

								<p:column headerText="Quarta&nbsp;">
									<h:outputText
										value="#{diaSemana.horaIniQuarta}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimQuarta}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>										
								</p:column>

								<p:column headerText="Quinta&nbsp;">
									<h:outputText
										value="#{diaSemana.horaIniQuinta}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimQuinta}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>										
								</p:column>

								<p:column headerText="&nbsp;Sexta&nbsp;">
									<h:outputText
										value="#{diaSemana.horaIniSexta}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimSexta}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>										
								</p:column>

								<p:column headerText="Sábado&nbsp;">
									<h:outputText
										value="#{diaSemana.horaIniSabado}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimSabado}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
								</p:column>

								<p:column headerText="Domingo">
									<h:outputText
										value="#{diaSemana.horaIniDomingo}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>	
									<h:outputText value=" - " />
									<h:outputText
										value="#{diaSemana.horaFimDomingo}" >
										<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" /> 
									</h:outputText>
								</p:column>

							</p:dataTable></td>
					</tr>
			</table>			
			</p:dialog>		
		</h:form>		
		<h:form prependId="false">

			<p:growl id="messages" showDetail="true" sticky="true" />
			
			<table width="100%">
				<tr>
				<td>				
				<h:inputHidden value="#{agendamentoMB.idSelectedEstabelecimento}" />

						<h:panelGrid columns="2" id="agendaEstabelecimentoTable"
								border="0">

								<h:outputText value="Empresa: " />
								<h:outputText
											value="#{agendamentoMB.estabelecimento.nomeFantasia}"
											styleClass="negrito" />
									
								<h:outputText value="Cidade: " styleClass="fontSmall"/>
								<h:outputText
									value="#{agendamentoMB.estabelecimento.endereco.bairro.cidade.nome}"
									styleClass="negrito fontSmall" />

								<h:outputText value="Bairro: " styleClass="fontSmall"/>
								<h:outputText
									value="#{agendamentoMB.estabelecimento.endereco.bairro.descricao}"
									styleClass="negrito fontSmall" />

								<h:outputText value="Logradouro: " styleClass="fontSmall"/>
								<h:outputText
									value="#{agendamentoMB.estabelecimento.endereco.logradouro} #{agendamentoMB.estabelecimento.endereco.numero}"
									styleClass="negrito fontSmall" />

								<h:outputText value="Telefone: " styleClass="fontSmall"/>
								<h:outputText
									value="( #{agendamentoMB.estabelecimento.ddd} ) #{agendamentoMB.estabelecimento.telefone}"
									styleClass="negrito fontSmall" />

								<h:outputLabel for="servicosCombo" value="Serviço:" />
								<p:selectOneListbox 
									value="#{agendamentoMB.idServicoFuncionarioSelecionado}"
									rendered="true" id="servicosCombo" style="height:200px;width:500px">
									<f:selectItem itemLabel="Selecione..." itemValue="0" />
									<f:selectItems value="#{agendamentoMB.mapServicosFuncionario}"
										var="funcionarioServicos"
										itemLabel="#{funcionarioServicos.servicos.descricao}"
										itemValue="{funcionarioServicos.id}" />
									<p:ajax listener="#{agendamentoMB.carregarDatas}"
										update="datasDisponiveis,horariosDisponiveis,preco" />
									<p:ajax listener="#{agendamentoMB.disponibilizarPreco}"	update="preco" />	
								</p:selectOneListbox >
								
								<h:outputLabel value="Preço:" />
								<h:outputText value="#{agendamentoMB.precoServicoSelecionado}" id="preco"
									styleClass="negrito" />
									
								<h:outputLabel for="datasDisponiveis"
									value="Datas disponíveis:" />
								<h:panelGroup>
									<p:selectOneListbox value="#{agendamentoMB.dataSelecionada}"
										id="datasDisponiveis"  style="height:200px;width:400px">
										<f:selectItem itemLabel="Selecione..." itemValue="0" />
										<f:selectItems value="#{agendamentoMB.mapDatasAgendamento}"
											var="data" itemLabel="#{data.data}" itemValue="{data.id}" />
										<p:ajax event="change"
											listener="#{agendamentoMB.gerarHorariosDisponiveisPorDiaEServico}"
											update="horariosDisponiveis,duracao" />
									</p:selectOneListbox>
									<p:commandLink id="btnFindHorario"
										update="horariosDisponiveis,duracao"
										action="#{agendamentoMB.gerarHorariosDisponiveisPorDiaEServico}">
										<p:graphicImage value="/img/find.gif" width="20" height="20" />
									</p:commandLink>
								</h:panelGroup>

								<h:outputLabel for="horariosDisponiveis"
									value="Hor&aacute;rios:" />
								<p:selectOneListbox value="#{agendamentoMB.horarioSelecionado}"
									id="horariosDisponiveis" style="height:200px;width:400px">
									<f:selectItem itemLabel="Selecione..." itemValue="0" />
									<f:selectItems value="#{agendamentoMB.mapHorariosAgendamento}"
										var="horario" itemLabel="#{horario.data}"
										itemValue="{horario.id}" />
								</p:selectOneListbox >

								<h:outputLabel for="duracao" value="Duração Média:" />
								<h:outputText id="duracao" value="#{agendamentoMB.duracao}"
									styleClass="negrito">
									<f:convertDateTime pattern="HH:mm" timeZone="GMT-03:00" />
								</h:outputText>
								
								<h:outputText value="Data Atual: " />
								<p:clock pattern="dd.MM.yyyy HH:mm:ss " mode="server" /> 
								
								<h:outputText value=" " />
								<h:outputText value=" " />
								
								<h:outputText value=" " />
								<p:commandButton type="submit" actionListener="#{agendamentoMB.addEvent}" value="Agendar" update="datasDisponiveis,horariosDisponiveis,messages,duracao,servicosCombo"/>

								<h:outputText value="#{agendamentoMB.mensagemAgendamento}" />
								<h:outputText value=" " />

							</h:panelGrid>							
							</td>
						</tr>
				</table>
			</h:form>
			</p:panel>
		</td>
	</tr>
</table>			
	</h:body>
</f:view>
</html>